<template>
  <div class="flex items-center justify-between">
    <div class="mr-10px px-15px mr-15px">
      <div class="float-left w-45px h-45px mr-10px">
        <img src="../../../../../assets/svg/avatar.svg" class="w-39px h-39px ml-2px" alt="" />
      </div>
      <div class="font-bold .leading-loose text-lg mt-5px float-left text-white">
        {{ username }}
      </div>
    </div>

    <div class="logout border-bg-white border-2px rounded-5px" @click="handleLoginOut">
      <img src="../../../../../assets/svg/logout.svg" class="w-30px h-30px" alt="" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { router } from '/@/router';
import { saasLandingLogout } from '../../../../../api/sys/user';
import { SaaSPageEnum } from '/@/enums/pageEnum';
import { useUserStoreWithout } from '/@/store/modules/user';
const userStore = useUserStoreWithout();
const tenantName = userStore.getUserInfo?.tenantName as string;
const userId = userStore.getUserInfo?.userId as string;
const username = userStore.getUserInfo?.userName as string;
function handleLoginOut() {
  saasLandingLogout({ tenantName, userId });
  userStore.clearAllLoginInfo();
  router.push(SaaSPageEnum.BASE_LOGIN);
}
</script>

<style lang="less">
.logout {
  cursor: pointer;
  transition: 0.5s;
  transition-timing-function: ease-in-out;
}
.logout:hover {
  transform: scale(1.2);
  // transform: sca(0.5turn);
}
</style>
